<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script crossorigin src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<div id="root1"></div>
<script type="text/babel">
    const root = ReactDOM.createRoot(document.getElementById('root'))
    const movies = ['大话西游', '捕风追影', '古惑仔-猛龙过江']

    class App extends React.Component {
        constructor(props) {
            super();
            this.state = {
                movies: movies,
            }
            this.render = this.render.bind(this);
        }
        render() {
            const list = []
            this.state.movies.forEach(movie => {
                list.push(<li key={movie}>{movie}</li>)
            })

            return (
                <div>
                    <h1>电影列表</h1>
                    <ul>
                        {list}
                    </ul>
                </div>
            )
        }
    }
    root.render(<App />);

    class App1 extends React.Component {
        constructor(props) {
            super();
            this.state = {
                movies: movies,
            }
            this.render = this.render.bind(this);
        }
        render() {
            return (
                <div>
                    <h1>电影列表Map</h1>
                    <ul>
                        {this.state.movies.map(movie => {return <li key={movie}>{movie}</li>})}
                    </ul>
                </div>
            )
        }
    }
    const root1 = ReactDOM.createRoot(document.getElementById('root1'));
    root1.render(<App1 />)
</script>
</body>
</html>